<template>
  <div class="intent-mining-page">
    <div class="title">
      <div class="iconTip">我的-用户管理</div>
    </div>
    <div class="search">
      <SearchList
        :searchList="searchList"
        :searchData="searchData"
        @search="search"
        @reSet="reSet"
        @updateSearchData="updateSearchData"
        :option="option"
        :treeData="treeData"
      ></SearchList>
    </div>
    <div class="btn">
      <div
        class="btn-item"
        v-show="userRoleType"
        @click="addDataOperation('新增-用户管理单')"
      >
        <a-icon type="plus-square" />
        新增
      </div>
      <div class="btn-item" v-show="userRoleType" @click="deleteDataObj">
        <a-icon type="delete" />
        删除
      </div>
    </div>
    <MyTable
      :data-source="tableData"
      :columns="columns"
      row-key="id"
      :pageNo.sync="pageNo"
      :pageSize.sync="pageSize"
      :total="total"
      :userMan="true"
      :userAdmin="true"
      :roleType="userRoleType"
      :mySelectedRowKeys="deleteId"
      :slotName="['status', 'selectedroles']"
      @updateDeleteId="updateDeleteId"
    >
      <template #selectedroles="scope">
        <span>{{ getUserRole(scope.data.text) }}</span>
      </template>
      <template #status="scope">
        <span>{{ scope.data.text === 1 ? "正常" : "冻结" }}</span>
      </template>
      <template #operation="scope">
        <span class="operate">
          <span
            class="operate-item"
            @click="
              previewDataOperation(scope.data.record, true, '查看-用户管理单')
            "
          >
            查看
          </span>
          <span
            v-show="userRoleType"
            class="operate-item"
            @click="
              editDataOperation(
                scope.data.record,
                false,
                '修改-用户管理单',
                true
              )
            "
          >
            修改
          </span>
          <span
            v-show="userRoleType"
            class="operate-item"
            @click="editDataPassword(scope.data.record)"
          >
            密码修改
          </span>
          <span
            v-show="userRoleType"
            class="operate-item"
            @click="deleteDataObj(scope.data.record, true)"
          >
            删除
          </span>
        </span>
      </template>
    </MyTable>
    <div class="table-paging">
      <a-pagination
        :current="pageNo"
        :total="total"
        :show-total="(total) => `共有 ${total} 条`"
        :page-size-options="['15', '20', '30', '50']"
        :page-size="pageSize"
        show-quick-jumper
        show-size-changer
        @change="change"
        @showSizeChange="change"
      />
    </div>
    <a-modal
      v-model="visible"
      :footer="null"
      :title="title"
      centered
      width="40%"
    >
      <CommonModal
        :formKey="formKey"
        :formData="formData"
        :option="option"
        :disable="disable"
        :title="title"
        :treeData="treeData"
        :tableName="tableName"
        :editNameBack="editNameBack"
        @updateFormData="updateFormData"
        @offModalOperation="offModal"
        @submitModal="submit"
      />
    </a-modal>
    <a-modal
      v-model="passVisible"
      :footer="null"
      title="修改密码"
      centered
      width="40%"
    >
      <div class="modal-content">
        <a-form-model
          layout="horizontal"
          ref="ruleForm"
          :model="passFormData"
          :rules="rules"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 18 }"
          class="content"
        >
          <a-form-model-item label="用户账号" prop="username">
            <a-input
              disabled
              placeholder="请输入"
              v-model="passFormData.username"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item label="登录密码" prop="password">
            <a-input-password
              placeholder="请输入"
              v-model="passFormData.password"
            ></a-input-password>
          </a-form-model-item>
          <a-form-model-item label="确认密码" prop="confirmPassword">
            <a-input-password
              placeholder="请输入"
              v-model="passFormData.confirmPassword"
            ></a-input-password>
          </a-form-model-item>
        </a-form-model>
        <div class="my-btn" v-show="!disable">
          <a-button type="primary" @click="submitPass">确定</a-button>
          <a-button @click="offModalPass">取消</a-button>
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model="visiblePreview"
      :footer="null"
      :title="title"
      centered
      width="40%"
    >
      <CommonPreviewModal
        :formKey="formKey"
        :formData="formData"
        :option="option"
        :typePage="1"
      />
    </a-modal>
  </div>
</template>

<script setup>
import SearchList from "@/components/common/search-list.vue";
import MyTable from "@/components/common/my-table.vue";
import CommonModal from "@/components/common/user-modal.vue";
import CommonPreviewModal from "@/components/common/common-preview-modal.vue";
import { onMounted, watch, computed, ref, reactive } from "vue";
import { userManage } from "@/store/user-manage";
import { message } from "ant-design-vue";
import { storeToRefs } from "pinia";
import { changePassWord } from "@/services/userManage.service";
import { commonStore } from "@/store/common-store";
const { userId, userRoleType } = storeToRefs(commonStore());
const store = userManage();
const {
  tableData,
  columns,
  pageNo,
  pageSize,
  total,
  searchList,
  formData,
  searchData,
  formKey,
  deleteId,
  title,
  visible,
  disable,
  option,
  tableName,
  editNameBack,
  treeData,
  visiblePreview,
} = storeToRefs(store);
const change = (page, pageSize1) => {
  pageNo.value = page;
  pageSize.value = pageSize1;
};
const {
  reSet,
  addDataOperation,
  editDataOperation,
  deleteDataObj,
  getTbodyData,
  search,
  updateSearchData,
  updateDeleteId,
  updateFormData,
  offModal,
  submit,
  getRegion,
  getSelectData,
  previewDataOperation,
} = store;
watch(
  [pageNo, pageSize],
  async () => {
    await getTbodyData();
  },
  { immediate: false }
);

//映射角色
function getUserRole(id) {
  if (id) {
    let arr = [];
    id.split(",").forEach((item) => {
      let obj = option.value.find((item1) => item1.id === item);
      if (obj) {
        arr.push(obj.roleCode);
      }
    });
    return arr.join(",");
  } else {
    return "";
  }
}
onMounted(async () => {
  await getSelectData();
  await getRegion();
  await getTbodyData();
});
const ruleForm = ref(null);
const passVisible = ref(false);
const passFormData = reactive({
  username: "",
  password: "",
  confirmPassword: "",
});
const rules = ref({
  username: [
    { required: true, message: "用户账号为空，不可修改密码", trigger: "blur" },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  confirmPassword: [
    { required: true, validator: validatePassWord, trigger: "blur" },
  ],
});
function validatePassWord(rule, value, callback) {
  if (value) {
    if (passFormData.password === value) {
      return true;
    } else {
      callback(new Error("两次输入的密码不一致"));
    }
  } else {
    callback(new Error("请再次输入密码"));
  }
}

async function updatePassWord() {
  const res = await changePassWord({
    username: passFormData.username,
    password: passFormData.password,
    confirmPassword: passFormData.confirmPassword,
  });
  if (res && res.code === 200) {
    message.success(res?.result || "密码修改成功", 2);
    await offModalPass();
  } else {
    message.error(res?.result || "密码修改失败", 2);
  }
}
function offModalPass() {
  passVisible.value = false;
  for (let key in passFormData) {
    passFormData[key] = "";
  }
}
async function submitPass(e) {
  e.preventDefault();
  ruleForm.value.validate(async (valid) => {
    if (valid) {
      await updatePassWord();
    }
  });
}
function editDataPassword(value) {
  passVisible.value = true;
  passFormData.username = value.username;
}
</script>

<style scoped lang="less">
.intent-mining-page {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 14px;
  color: #464c5b;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(250, 251, 255, 1) 0%,
    rgba(243, 245, 251, 1) 99%
  );
  .search {
    width: 100%;
    margin: 15px 0;
    border-radius: 4px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
  }
  .btn {
    padding-left: 20px;
    display: flex;
    column-gap: 20px;
    justify-content: flex-end;
    background-color: #fff;
    .btn-item {
      color: #1067ee;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.modal-content {
  width: 100%;
  .my-btn {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 40px;
  }
}
.title {
  display: flex;
  width: 80%;
  position: relative;
  align-self: center;
  color: rgba(36, 104, 242, 1);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  margin-left: 140px;
  border-bottom: 1px rgba(36, 104, 242, 1) solid;

  .iconTip {
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
      sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 20px;
    color: #4e5969;
    text-align: center;
    width: 94%;
  }
  .img {
    margin-left: auto;
    color: #2f54eb;
    width: 28px;
    height: 26px;
  }
}
.table-paging {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/deep/ .ant-modal-title {
  font-weight: 700;
}
</style>
